<?php
    session_start();
    include("includes/connect_db.php");
    $host = $_POST['host'];
    $sql = $_POST['sql'];
    $jenis = $_POST['jenis'];
    $tabel = $_POST['tabel'];


    $sql_lihat_host = "SELECT * FROM tb_host WHERE id_host = '$host'";
    $query_lihat_host = mysql_query($sql_lihat_host);
    $lihat_host = mysql_fetch_array($query_lihat_host);
    
    $koneksiBaru = mysql_connect($lihat_host['host'], $lihat_host['username'], $lihat_host['password']) or die("Connection Error: " . mysql_error());

    mysql_select_db($lihat_host['db'], $koneksiBaru) or die("Error conecting to db.");
?>

<STYLE TYPE="text/css">
    #modal-format{
        top: 35%;
        margin: 0 0 0 -300px;
        width: 600px;
    }
    .modal-header{
        background: #08c;
        color: #FFF;
    }
    .modal-body{
        
    }
    .footer{
        color: #08c;
        padding-top: 5px;
    }
    .selectPlacer{
        border-bottom: 1px solid #08c;
    }
    .table{
        border: 1px solid #DDD;
        font-family: 'SEGOE UI';
    }
    .close{
        color: #FFF;
    }
    .judul{
        color: #08c;
        background: #FFF;
        margin-right: 10px;
    }
    .btn{
         background: #08c;
         min-width: 100px;
    }
    .parTabel{
        padding: 5px;
        background: #08c;
        color: #FFF;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        border-radius: 5px;
    }
    .rincianTabel{
        padding: 10px 0px; 
        max-height: 60px; 
        overflow-y: auto;
    }
    .rincianOutput, .rincianParameter{
        padding-top: 5px;
        margin-top: 10px;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #08c;
    }
</STYLE>

<div id="modal-format" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">
            <?php
                switch ($jenis) {
                    case 1:
                        echo "Table";
                        break;
                    case 2:
                        echo "Output";
                        break;
                    case 3:
                        echo "Parameter";
                        break;
                    case 4:
                        echo "Function";
                        break;
                    case 5:
                        echo "Procedure";
                        break;
                    case 6:
                        echo "Parameter";
                        break;
                }
            ?>
        </h3>
    </div>
    <div class="modal-body">
        <div id="selectPlacer">
        <!-- <?php echo $host."|".$sql."|".$jenis."|"; ?>  --> 
        <?php
            // echo $host." - ".$sql." - ".$tabel;
            switch ($jenis) {
                case 1:
        ?>          <div class="selectPlacer" style="max-height: 300px; overflow: auto;">
                        <?php include("format-edit-modal-table.php"); ?>
                    </div>  
                    <div class="footer">
                        <button id="tambahTabel" class="btn btn-info">
                            <i class="icon-white icon-plus"></i>
                            Tambah Tabel
                        </Button>
                        <button id="btnTabel" class="btn btn-info" name="pilih">
                            <i class="icon-white icon-ok"></i>
                            Pilih
                        </button>
                    </div>
        <?php
                    break;
                case 2:
        ?>
                    <div id="output">
                        <?php include("format-edit-modal-output.php"); ?>
                    </div> 
        <?php
                    break;
                case 3:
        ?>
                    <div id="parameter">
                        <?php include("format-edit-modal-parameter.php"); ?>
                    </div>  
        <?php
                    break;

                case 4:
        ?>
                    <div id="fungsi">
                        <?php include("format-edit-modal-function.php"); ?>
                    </div>  
        <?php
                    break;

                case 5:
        ?>
                    <div id="prosedur">
                        <?php include("format-edit-modal-function.php"); ?>
                    </div>  
        <?php
                    break;

                case 6:
        ?>
                    <div id="fungsiParameter">
                        <?php include("format-edit-modal-functionParameter.php"); ?>
                    </div>  
        <?php
                    break;
            }
        ?>
        </div>
    </div>
</div>


<script type="text/javascript">
    var isianFunctionParameter = [];

    function functionParameter(){
        var panjang = $('.namaParameterFungsi').length;
        x=0;
        $('.namaParameterFungsi').each(function(){
            if ($(this).val()!="") {
                x++;
            };
        });

        if (x != panjang) {
            $('.btnParameterFungsi').attr('disabled', 'disabled');
        } else{
            $('.btnParameterFungsi').removeAttr('disabled');
        }
    };

    $(document).ready(function() {
        var valueTemp = [];
        $('#modal-format').modal('show');

        $('#btnTabel').click(function(){
            console.log($('#isianTabel').val());
            outputArr.splice(0);
            parameterArr.splice(0);
            $('#dataOutput').val(outputArr);
            $('#dataParameter').val(parameterArr);
            $('#proses').attr('disabled', 'disabled');
            $('.isianTabel').each(function(){
                valueTemp.push($(this).val());
            });
            $('#dataTabel').val(valueTemp);
            var sql = $('#dataSql').val();
            
            if (sql == 'DELETE') {
                $('#pilihParameter').slideDown();
            } else if (sql == 'INSERT') {
                $('#pilihOutput').slideDown();
            } else {
                $('#pilihOutput').slideDown();
                $('#pilihParameter').slideDown();
            };

            $('#modal-format').modal('hide');
        });

        $('.btnFunction').click(function(){
            $('#proses').attr('disabled', 'disabled');
            $('#dataFunction').val($('.isianFungsi').val());
            $('#modal-format').modal('hide');
            $('#pilihFunctionParameter').slideDown();
        });

        $('.btnOutput').live('click', function(){
            $('#modal-format').modal('hide');
        });

        $('.btnParameter').live('click', function(){
            $('#modal-format').modal('hide');
        });

        var sql = $('#dataSql').val();
        if (sql !== 'SELECT') {
            $('#tambahTabel').attr('disabled', 'disabled');
        };

        $('#tambahTabel').click(function(){
            $.ajax({
              url: 'format-edit-modal-table.php',
              data: {host: <?php echo $host; ?>},
              type: 'POST',
              complete: function(xhr, textStatus) {
                //called when complete
              },
              success: function(data, textStatus, xhr) {
                $('.selectPlacer').append(data);
              },
              error: function(xhr, textStatus, errorThrown) {
                //called when there is an error
              }
            }); 
        });

        $('.removeTabel').live('click', function(){
            $(this).parent('div').remove();
        });

        $('#output').find('.rincianTabel').on('click', ".parTabel", function(){
            console.log($(this).data("id"))
            var formTabel = {
                host: <?php echo $host; ?>,
                namaTabel : $(this).data("id"),
                tabel : $('#dataTabel').val(),
                idOperasi : $('#dataOperasi').val()
            };

            $.ajax({
              url: 'format-edit-modal-output-rincian_tabel.php',
              type: 'POST',
              data: formTabel,
              complete: function(xhr, textStatus) {
                //called when complete
              },
              success: function(data, textStatus, xhr) {
                $('.rincianOutput').slideUp("medium", function(){
                    $('.rincianOutput').html(data);
                    $('.idOutput').each(function(){
                        var that = $(this);
                        for (var i = 0; i < outputArr.length; i++) {
                            if(outputArr[i].indexOf(that.val())!=-1){
                                var check = that.closest('tr').find('.check');
                                check.css('opacity', '1');
                                check.parent('td').find('.checkOutput').attr('checked', 'checked');
                                that.closest('tr').css('background-color', '#ddd');
                                that.closest('tr').find('.descOutput').html("<span style='margin-right: 30px'>"+outputArr[i][1]+"</span><span>"+outputArr[i][2]+"</span>");
                            }
                        };
                    });
                    $('.rincianOutput').slideDown("medium");
                });
              },
              error: function(xhr, textStatus, errorThrown) {
                //called when there is an error
              }
            });
        });

        $('#parameter').find('.rincianTabel').on('click', ".parTabel", function(){
            console.log($(this).data("id"))
            var formTabel = {
                host: <?php echo $host; ?>,
                namaTabel : $(this).data("id"),
                tabel : $('#dataTabel').val()
            };

            $.ajax({
              url: 'format-edit-modal-parameter-rincian_tabel.php',
              type: 'POST',
              data: formTabel,
              complete: function(xhr, textStatus) {
                //called when complete
              },
              success: function(data, textStatus, xhr) {
                $('.rincianParameter').slideUp("medium", function(){
                    $('.rincianParameter').html(data);
                    $('.idParameter').each(function(){
                        var that = $(this);
                        for (var i = 0; i < parameterArr.length; i++) {
                            if(parameterArr[i].indexOf(that.val())!=-1){
                                var check = that.closest('tr').find('.check');
                                check.css('opacity', '1');
                                check.parent('td').find('.checkParameter').attr('checked', 'checked');
                                that.closest('tr').css('background-color', '#ddd');
                                that.closest('tr').find('.descParameter').html("<span style='margin-right: 30px'>"+parameterArr[i][2]+"</span><span>"+parameterArr[i][1]+"</span>");
                            }
                        };
                    });
                    $('.rincianParameter').slideDown("medium");
                });
              },
              error: function(xhr, textStatus, errorThrown) {
                //called when there is an error
              }
            });
        });

        $('.namaParameterFungsi').live('blur', function(){
            var tempArr = [];
            var A = $(this);
            var B = A.closest('tr').find('.namaParameterFungsiAwal');

            tempArr.push(B.children('span').html());
            tempArr.push(A.val());

            if(isianFunctionParameter.length==0){
                isianFunctionParameter.push(tempArr);
            }else if(isianFunctionParameter[B.data('index')] == undefined){
                isianFunctionParameter[B.data('index')] = tempArr;
            }else{
                isianFunctionParameter[B.data('index')] = tempArr;
            }

            functionParameter();
        });

        $('.btnParameterFungsi').live('click', function(){
            $('#dataFunctionParameter').val(isianFunctionParameter);
            $('#modal-format').modal('hide');
            $('#proses').removeAttr('disabled');
        });
    });
</script>